<template>
  <div id="detailapplybox" class="rightBodyContent">
    <div class="rightBodyContent-in">
      <el-button type="primary" plain @click="backlist" size="small"><i class="el-icon-back"></i>返回列表</el-button>
      <div class="applybody mt-40">
        <el-form :model="editForm" label-width="200px" :rules="editFormRules" ref="editForm">
          <el-form-item label="头像:" prop="pic">
            <PictureUpload @getChildValue="getChildValue" imgNumber="1" page="studentPic"
                       :picSrc="editForm.pic"></PictureUpload>
          </el-form-item>
          <el-row>
            <el-col :span="8">
              <el-form-item label="姓名:" prop="name">
                <el-input v-model="editForm.name" auto-complete="off" placeholder="填写姓名" v-if="!editId"></el-input>
                <p v-else>{{editForm.name?editForm.name:'暂无数据'}}</p>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别:" prop="sex">
                <el-radio-group v-model="editForm.sex" v-if="!editId">
                  <el-radio label="1">男</el-radio>
                  <el-radio label="0">女</el-radio>
                </el-radio-group>
                <p v-else>{{editForm.sex}}</p>
              </el-form-item>
            </el-col>
            <el-col :span="8"></el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="民族:" prop="nation">
                <el-input v-model="editForm.nation" auto-complete="off" placeholder="填写民族"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出生日期:" prop="birthday">
                <!--<el-date-picker-->
                        <!--v-model="editForm.birthday"-->
                        <!--type="date"-->
                        <!--placeholder="选择出生日期"-->
                        <!--format="yyyy-MM-dd"-->
                        <!--value-format="yyyy-MM-dd"-->
                        <!--:picker-options="pickerOptions1">-->
                <!--</el-date-picker>-->
                <el-input v-model="editForm.birthday" auto-complete="off" placeholder="出生日期"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8"></el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="入校时间:" prop="enrol_time">
                <el-date-picker
                        v-model="editForm.enrol_time"
                        type="date"
                        placeholder="选择入校时间"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学籍号:" prop="student_number">
                <el-input v-model="editForm.student_code" auto-complete="off" placeholder="填写学籍号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8"></el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="年段班级:" prop="section_id">
                <div style="display: flex">
                  <sectionInput @changeSection="changeSection" :sectionId.sync="editForm.section_id"></sectionInput>
                  <classInput @changeClass="changeClass" :sectionId.sync="editForm.section_id" :classId.sync="editForm.class_id"></classInput>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="身份证号:" prop="identity_card">
                <el-input v-model="editForm.identity_card" auto-complete="off" placeholder="填写身份证号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple"></div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="入学身高:" prop="height">
                <div style="display: flex">
                  <el-input v-model="editForm.height" auto-complete="off" placeholder="填写入学身高"></el-input>(cm)
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="入学体重:" prop="weight">
                <div style="display: flex">
                <el-input v-model="editForm.weight" auto-complete="off" placeholder="填写入学体重"></el-input>(kg)
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8"></el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="手环ID:" prop="id_number">
                <el-input v-model="editForm.id_number" auto-complete="off" placeholder="手环ID"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="监护人:" prop="guardian">
                <el-input v-model="editForm.guardian" auto-complete="off" placeholder="填写监护人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8"></el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="户籍地址（以户籍本为主）:" prop="census_register">
                <div style="display: flex;">
                  <el-input v-model="editForm.census_register" auto-complete="off"
                            placeholder="填写户籍地址（以户籍本为主）" class="mr-10"></el-input>
                  <el-input v-model="editForm.census_register_town" auto-complete="off" placeholder="户籍所属镇（街）"
                            class="w-200"></el-input>
                </div>
                <!--<div v-else>-->
                  <!--{{editForm.census_register}},{{editForm.census_register_town}}/镇（街）-->
                <!--</div>-->
              </el-form-item>
            </el-col>
            <el-col :span="4">
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="户口所在地:">
                <div style="display: flex;">
                  <el-input v-model="editForm.address" auto-complete="off" placeholder="镇/街道" class="w-200 mr-10"></el-input>
                  <!--<v-distpicker :province="editForm.province" :city="editForm.city" :area="editForm.area"-->
                                <!--@selected="onSelected" :placeholders="placeholders"></v-distpicker>-->
                  <el-input v-model="editForm.town" auto-complete="off" placeholder="镇/街道" class="w-200"></el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="" prop="position">
            <el-button type="primary" size="small" @click="submitForm('editForm',1)">保存</el-button>
            <el-button size="small" @click="submitForm('editForm',2)">返回</el-button>
            <p class="infodescribe" v-if="!editId"><i class="el-icon-warning-outline"></i>提示：请确认填写的信息，提交后学生信息有些不可编辑</p>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import {pagination, tableoption, yearDay} from '@/utils/util.js'
  import classInput from '@/components/template/classInput.vue'
  import sectionInput from '@/components/template/sectionInput.vue'
  import PictureUpload from '@/components/dialog/PictureUpload.vue'
  import uploadimgold from '@/components/dialog/uploadimg.vue'

  import api from '@/utils/api.js'
  import VDistpicker from 'v-distpicker'

export default {
    components: {
      VDistpicker,
      classInput,
      sectionInput,
      PictureUpload,
      uploadimgold
    },
    data () {
      return {
        pickerOptions1: {
          disabledDate (time) {
            return time.getTime() > Date.now() //  - 8.64e7 减去就是不包含今天的
          }
        },
        placeholders: {
          province: '------- 省 --------',
          city: '--- 市 ---',
          area: '--- 区 ---'
        },
        editForm: {
          address: '',
          student_number: '', // 学号
          student_code: '', // 学籍号
          name: '', // 姓名
          sex: '1', // 性别
          section_id: '', // 年级
          class_id: '', // 班级
          id_number: '', // 卡号
          enrol_time: '', // 入学时间
          height: '',
          weight: '',
          pic: '',
          identity_card: '', // 身份证
          nation: '', // 民族
          birthday: '', // 出生日期
          census_register: '', // 	字符串 	必填 	1 	- 	户籍所在地
          census_register_town: '', // 	字符串 	必填 	1 	- 	户籍所属镇（街）
          guardian: '', // 	监护人
          province: '', //  	省
          city: '', //  	市
          district: '', //  	区
          town: '', //  	镇/街道
          status: '1' // 状态
        }, // 编辑界面数据
        editFormRules: {
          name: [
            {required: true, message: '请填写姓名', trigger: 'blur'}
          ]
        }, // 表单验证不能为空规则
        editId: this.$route.query.editId,
        role: [],
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        },
        classesvalue: '',
        className: '',
        sectionName: ''
      }
    },
    created () {
      if (this.editId) {
        this.InitFn()
      }
    },
    methods: {
      InitFn () {
        console.log('请求详情')
        this.$fetch(api.admin_student_edit, {
          id: this.editId
        }).then((response) => {
          if (response.code === 0) {
            this.editForm.pic = response.vo.pic
            this.editForm.name = response.vo.name
            this.editForm.student_number = response.vo.student_number // 学号
            this.editForm.student_code = response.vo.student_code // 学籍号
            this.editForm.age = response.vo.age // 年龄
            this.editForm.sex = response.vo.sex // 性别
            this.editForm.address = response.vo.address
            // this.editForm.section_id = response.vo.section_id // 年级
            if (response.vo.section_id) {
              this.editForm.section_id = response.vo.section_id
            }
            if (response.vo.class_id) this.editForm.class_id = response.vo.class_id
            // this.editForm.class_id = response.vo.class_id// 班级
            this.editForm.id_number = response.vo.id_number // 卡号
            if (response.vo.enrol_time.indexOf('-') === -1) {
              this.editForm.enrol_time = yearDay(response.vo.enrol_time) // 入学时间
            } else {
              this.editForm.enrol_time = response.vo.enrol_time // 入学时间
            }
            this.editForm.height = response.vo.height
            this.editForm.weight = response.vo.weight

            if (response.vo.classes) {
              this.className = response.vo.classes.class_name
            }
            if (response.vo.section) {
              this.sectionName = response.vo.section.section_name
            }
            this.editForm.identity_card = response.vo.identity_card // 身份证
            this.editForm.nation = response.vo.nation // 民族
            this.editForm.birthday = response.vo.birthday // 出生日期

            this.editForm.census_register = response.vo.census_register // 	字符串 	必填 	1 	- 	户籍所在地
            this.editForm.census_register_town = response.vo.census_register_town // 	字符串 	必填 	1 	- 	户籍所属镇（街）
            this.editForm.guardian = response.vo.guardian// 	监护人
            this.editForm.province = response.vo.province//  	省
            this.editForm.city = response.vo.city//  	市
            this.editForm.district = response.vo.district//  	区
            this.editForm.town = response.vo.town//  	镇/街道
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      handleSelectionChange (val) {
        this.handleSelection = val
      },
      backlist () {
        this.$router.go(-1)
      },
      submitForm (formName) {
        console.log('提交的数据：', this.editForm)
        this.submitFormAdd()
        return
        if (this.editId) {
          this.backlist()
        } else {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.submitFormAdd()
            } else {
              console.log('error submit!!')
              return false
            }
          })
        }
      },
      submitFormAdd () {
        let url = api.admin_student_add
        if (this.editId) {
          url = api.admin_student_edit
          this.editForm.id = this.editId
        }
        // if (!this.editId) {
        //   this.editForm.enrol_time = yearDay(this.editForm.enrol_time)
        //   this.editForm.birthday = yearDay(this.editForm.birthday)
        // }
        this.$post(url, this.editForm).then((response) => {
          if (response.code === 0) {
            this.$message({
              message: '编辑成功',
              type: 'success'
            })
            this.$emit('getevents')
            this.dialogVisible = false
            this.editForm.student_number = ''
            if (!this.editId) {
              this.$refs['editForm'].resetFields()
            }
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      onSelected (data) {
        this.editForm.province = data.province.value
        this.editForm.city = data.city.value
        this.editForm.district = data.area.value
      },
      getImgSrc (option) {
        this.editForm.pic = option
      },
      changeSection (option) {
        this.editForm.class_id = ''
        this.editForm.section_id = option
      },
      changeClass (option) {
        this.editForm.class_id = option
      },
      beforeRouteLeave (to, from, next) {
        to.meta.keepAlive = true
        next()
      },
      getChildValue (option) {
        this.editForm.pic = option
      }
    },
    mounted () {
    }
  }
</script>


